<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:mo="https://gitee.com/aun/Timo1"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<body>
<style>
    .card-container {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        margin: 20px;
    }
    .card {
        width: calc(33.33% - 15px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        padding: 20px;
        background-color: #fff;
    }
    .card-header {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 10px;
    }
    .card-body {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .card-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .card-footer button {
        padding: 5px 10px;
        border: none;
        border-radius: 4px;
        background-color: #00bfa5;
        color: #fff;
        cursor: pointer;
    }
    .card-footer button:hover {
        background-color: #009788;
    }
    .p_sex_age{
        font-size: 14px;
        color: rgba(167,172,177,1);
    }
    .service_num{
        border-radius: 2px;
        background-color: rgba(31,204,147,0.14);
        color: rgba(31,204,147,1);
        font-size: 12px;
        width: 100px;
        padding: 0 6px;
        text-align: center;
        margin-top: 7px;
    }
</style>
<div class="layui-card">

    <div class="layui-card-line"></div>

    <div class="layui-card-body ">

        <div class="layui-card-table layui-tab">
            <div class="layui-tab-content layui-bg-gray">
                <div class="layui-panel" style="padding: 15px">
                <form th:replace="/pcs/porter_service/index_search">
                </form>
                </div>
                <div class="card-container ">
                    <th:block th:if="${total == 0}">
                        <div class="layui-card-body" style="width: 100%">
                            <div class="layui-card-text">
                                <div style="text-align: center">
                                    <p style="font-size: 16px;color: #999">暂无数据</p>
                                </div>
                            </div>
                            </div>
                    </th:block>
                    <th:block th:if="${total != 0}">
                        <div class="layui-panel" style="width: 350px;padding: 15px" th:each="vo:${porterList}">
                            <div class="card-header">
                                <img th:src="${vo.headimg}" style="width:50px;height: 50px;border-radius: 50%" alt="护理人员头像">
                                <div style="width: 100%">
                                    <div style="display: flex;justify-content: space-between;">
                                        <h3 style="font-size: 18px;">[[${vo.name}]]&nbsp;&nbsp;&nbsp;&nbsp;
                                            <span class="p_sex_age" th:if="${vo.sex == 1}">男 [[${vo?.age}]]岁</span>
                                            <span class="p_sex_age" th:if="${vo.sex == 2}">女 [[${vo?.age}]]岁</span>
                                        </h3>
                                        <th:block th:if="${vo.serviceNowNum == 0 && vo.accompanyingNum ==0 && vo.checkNum ==0}">
                                            <span class="layui-font-gray">可服务</span>
                                        </th:block>
                                        <th:block th:if="${vo.serviceNowNum > 0 || vo.accompanyingNum > 0 || vo.checkNum > 0}">
                                            <span class="layui-font-orange">服务中</span>
                                        </th:block>
                                    </div>
                                    <p class="service_num">累计服务：[[${vo.serviceNum}]]次</p>
                                </div>
                            </div>
                            <div class="card-body">
                                <p>
                                    <span style="font-size: 16px">护理科室：</span>
                                    <th:block th:each="v :${vo.porterPermissions}">
                                        <span class="layui-badge layui-bg-green" th:text="${v?.depName}" ></span>
                                    </th:block>
                                </p>
                            </div>
                            <hr>
                            <div class="card-footer">
                                <div>
                                    <p><span style="font-size: 16px">当前陪护：</span>
                                        <th:block th:if="${vo.serviceNowNum == 0}">
                                            <span class="layui-badge layui-bg-gray" style="width: 40px;">无服务</span>
                                        </th:block>
                                        <th:block th:if="${vo.serviceNowNum > 0}">
                                            <span class="layui-badge layui-bg-green" style="width: 40px;">[[${vo.serviceNowNum}]]人</span>
                                        </th:block>
                                    </p>
                                </div>
                                <a th:if="${vo.serviceNowNum > 0}" class="layui-btn layui-btn-sm"  th:data-open="'pcs/order/index?orderStatus=2&porterName='+${vo.name}" style="background-color: #16baaa" >查看</a>
                            </div>
                            <hr>
                            <div class="card-footer">
                                <div>
                                    <p><span style="font-size: 16px">当前陪诊：</span>
                                        <th:block th:if="${vo.accompanyingNum == 0}">
                                            <span class="layui-badge layui-bg-gray" style="width: 40px;">无服务</span>
                                        </th:block>
                                        <th:block th:if="${vo.accompanyingNum > 0}">
                                            <span class="layui-badge layui-bg-green" style="width: 40px;">[[${vo.accompanyingNum}]]人</span>
                                        </th:block>
                                    </p>
                                </div>
                                <a  th:if="${vo.accompanyingNum > 0}" th:data-open="'pcs/order/index_p?type=2&orderStatus=2&porterName='+${vo.name}" class="layui-btn layui-btn-sm" style="background-color: #16baaa" >查看</a>
                            </div>
                            <hr>
                            <div class="card-footer">
                                <div>
                                    <p><span style="font-size: 16px">当前陪检：</span>
                                        <th:block th:if="${vo.checkNum == 0}">
                                            <span class="layui-badge layui-bg-gray" style="width: 40px;">无服务</span>
                                        </th:block>
                                        <th:block th:if="${vo.checkNum > 0}">
                                            <span class="layui-badge layui-bg-green" style="width: 40px;">[[${vo.checkNum}]]人</span>
                                        </th:block>
                                    </p>
                                </div>
                                <a class="layui-btn layui-btn-sm" th:if="${vo.checkNum > 0}"  th:data-open="'pcs/order/index_p?type=3&orderStatus=2&porterName='+${vo.name}" style="background-color: #16baaa" >查看</a>
                            </div>

                        </div>
                    </th:block>




                </div>

                <div id="demo-laypage-limits" style="text-align: right!important;"></div>
                <script type="text/javascript">
                    layui.use(function(){
                        var laypage = layui.laypage;
                        var count = "[[${total}]]";
                        if(count > 0){
                            // 自定义每页条数的选择项
                            laypage.render({
                                elem: 'demo-laypage-limits',
                                count: "[[${total}]]",
                                curr: "[[${page}]]",
                                limit: 8,
                                layout: ['prev', 'page', 'next'],
                                jump: function(obj, first){
                                    console.log(obj.curr); // 得到当前页，以便向服务端请求对应页的数据。
                                    console.log(obj.limit); // 得到每页显示的条数
                                    // 首次不执行
                                    if(!first){
                                        // do something
                                        console.log(location.hash)
                                        let hash = location.hash;
                                        //清除掉hash中的page参数
                                        hash = hash.replace(/&page=\d+/,'');
                                        window.location.href = hash+"&page="+obj.curr;
                                    }
                                }
                            });
                        }

                    });
                </script>
            </div>
        </div>
    </div>

</div>
</body>
</html>
